<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />

  <!--[if lt IE 8]>
  <meta http-equiv="refresh" content="0;ie.html" />
  <![endif]-->
   <link href="__PUBLIC__/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
  <link href="__PUBLIC__/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
  <link href="__PUBLIC__/css/animate.min.css" rel="stylesheet">
  <link href="__PUBLIC__/css/style.min.css?v=4.0.0" rel="stylesheet">
  <link href="__PUBLIC__/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
  <link href="__PUBLIC__/js/layui/css/layui.css" rel="stylesheet">
</head>

<body class="gray-bg">
<div class="row wrapper border-bottom white-bg page-heading">
  <div class="col-lg-10">
    <ol class="breadcrumb">
      <li>
        <h2 class="float-e-margins">
          <a href="">活动列表</a>
        </h2>
      </li>
    </ol>
  </div>
  <div class="col-lg-2">
  </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="col-lg-2">
</div>
  <!-- Panel Other -->
  <div class="ibox float-e-margins">
    <div class="ibox-title">
      <h5>活动列表</h5>
      <div class="ibox-tools">
        <a class="collapse-link">
          <i class="fa fa-chevron-up"></i>
        </a>
      </div>
    </div>
    <div class="ibox-content">
      <div class="row row-lg">
        <div class="col-sm-12">
          <!-- Example Events -->

          <div class="example-wrap">

            <div class="example">
              <table id="ActivityList" data-mobile-responsive="true">

              </table>
            </div>
          </div>
          <!-- End Example Events -->
        </div>
      </div>
    </div>
  </div>
  <!-- End Panel Other -->
</div>
<script src="__PUBLIC__/js/jquery.min.js?v=2.1.4"></script>
<script src="__PUBLIC__/js/bootstrap.min.js?v=3.3.5"></script>
<script src="__PUBLIC__/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="__PUBLIC__/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="__PUBLIC__/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="__PUBLIC__/js/layui/layui.all.js"></script>

<script>
  function step(value){
    if(value=="活动完成") return '<button class="btn btn-primary btn-xs">' + value + '</button>';
    return '<button class="btn btn-danger btn-xs">' + value + '</button>';
  }

  /**
   * 跳转到详情页面
   * @param Id 管理的活动Id
   */
  function detail(Id){
    window.location.href="ActivityDetail?Id=" + Id;
  }

  function op(value){
    return '<button class="btn btn-info btn-xs" onclick="detail(' + value + ')">活动详情</button>';
  }
  let $table=$('#ActivityList');
  $table.bootstrapTable({
    url: "ActivityListJson.html",
    dataType:'json',
    method:'post',
    search: true,
    pagination: true,
    showRefresh: true,
    showColumns: true,
    iconSize: 'outline',
    icons: {
      refresh: 'glyphicon-repeat',
      toggle: 'glyphicon-list-alt',
      columns: 'glyphicon-list-alt'
    },
    columns: [{
      field:'name',
      title:'活动名称',
    },{
      field:'location',
      title:'活动地点',
    },{
      field:'activity_time',
      title:'活动时间',
    },{
      field:'comment',
      title:'活动描述',
    },{
      field:'creator',
      title:'创建人',
    },{
      field:'college_name',
      title:'归属学院',
    },{
      field:'participant_num',
      title:'参与人数',
    },{
      field:'step',
      title:'当前进度',
      formatter:'step'
    },{
      field:'Id',
      title:'操作',
      formatter: "op"
    }],
  });


</script>

</body>

</html>
